<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>人才数据可视化系统</title>
    <link href="https://cdn.plot.ly/plotly-latest.min.css" rel="stylesheet">
    <style>
        body { font-family: 'Segoe UI', Arial, sans-serif; margin: 20px; }
        .chart-container { height: 600px; margin: 20px 0; }
        .controls { margin-bottom: 20px; }
        .tab { cursor: pointer; padding: 10px 20px; margin: 0 5px; background: #f0f4f8; border-radius: 4px; }
        .active-tab { background: #007bff; color: white; }
    </style>
</head>
<body>
    <h1>人才数据分析系统</h1>
    
    <div class="controls">
        <span class="tab active-tab" onclick="showChart('line')">折线图</span>
        <span class="tab" onclick="showChart('pie')">饼图</span>
        <span class="tab" onclick="showChart('scatter')">3D散点图</span>
    </div>

    <div id="chart-container" class="chart-container"></div>

    <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
    <script>
        // 数据预处理
        const rawData = [
            {id:1,name:"Alice",age:22,gender:"F",category:"产品设计",score1:78,score2:85,score3:92,timestamp:"2024-06-01"},
            {id:2,name:"Bob",age:24,gender:"M",category:"前端开发",score1:88,score2:76,score3:81,timestamp:"2024-06-01"},
            {id:3,name:"Charlie",age:23,gender:"M",category:"数据分析",score1:90,score2:89,score3:87,timestamp:"2024-06-02"},
            {id:4,name:"Diana",age:25,gender:"F",category:"前端开发",score1:82,score2:91,score3:84,timestamp:"2024-06-02"},
            {id:5,name:"Eric",age:21,gender:"M",category:"产品设计",score1:76,score2:80,score3:79,timestamp:"2024-06-03"},
            {id:6,name:"Fiona",age:22,gender:"F",category:"数据分析",score1:85,score2:88,score3:86,timestamp:"2024-06-03"},
            {id:7,name:"George",age:24,gender:"M",category:"前端开发",score1:93,score2:90,score3:91,timestamp:"2024-06-04"},
            {id:8,name:"Helen",age:23,gender:"F",category:"产品设计",score1:72,score2:70,score3:75,timestamp:"2024-06-04"},
            {id:9,name:"Ian",age:25,gender:"M",category:"数据分析",score1:87,score2:85,score3:90,timestamp:"2024-06-05"},
            {id:10,name:"Judy",age:22,gender:"F",category:"前端开发",score1:95,score2:92,score3:94,timestamp:"2024-06-05"}
        ];

        // 图表配置
        const config = {
            responsive: true,
            displayModeBar: true,
            modeBarButtonsToAdd: ['orbitRotation', 'zoomIn2d', 'zoomOut2d']
        };

        // 折线图配置
        function createLineChart() {
            const trace = {
                x: rawData.map(d => d.id),
                y: rawData.map(d => d.score1),
                type: 'scatter',
                mode: 'lines+markers',
                name: '基础能力',
                marker: {size: 10, color: '#1f77b4'}
            };
            
            const layout = {
                title: '基础能力发展曲线',
                xaxis: {title: '员工ID', range: [0.5, 10.5]},
                yaxis: {title: '能力评分', range: [60, 100]},
                hovermode: 'closest',
                showlegend: true
            };
            
            Plotly.newPlot('chart-container', [trace], layout, config);
        }

        // 饼图配置
        function createPieChart() {
            const categoryStats = rawData.reduce((acc, curr) => {
                acc[curr.category] = (acc[curr.category] || 0) + 1;
                return acc;
            }, {});

            const data = [{
                labels: Object.keys(categoryStats),
                values: Object.values(categoryStats),
                type: 'pie',
                textinfo: 'label+percent',
                insidetextorientation: 'radial',
                marker: {colors: ['#1f77b4', '#ff7f0e', '#2ca02c']}
            }];

            const layout = {
                title: '岗位分布比例',
                hovermode: 'closest',
                showlegend: true,
                annotations: [{
                    text: '数据统计',
                    showarrow: false,
                    x: 0.5,
                    y: 0.5,
                    font: {size: 16}
                }]
            };

            Plotly.newPlot('chart-container', data, layout, config);
        }

        // 3D散点图配置
        function create3DScatter() {
            const categories = [...new Set(rawData.map(d => d.category))];
            const colors = ['#1f77b4', '#ff7f0e', '#2ca02c'];
            
            const traces = categories.map((category, i) => ({
                x: rawData.filter(d => d.category === category).map(d => d.score1),
                y: rawData.filter(d => d.category === category).map(d => d.score2),
                z: rawData.filter(d => d.category === category).map(d => d.score3),
                mode: 'markers',
                marker: {
                    size: 8,
                    color: colors[i],
                    colorscale: 'Viridis',
                    showscale: i === 0,
                    line: {color: 'white', width: 0.5}
                },
                type: 'scatter3d',
                name: category,
                text: rawData.filter(d => d.category === category).map(d => `${d.name}<br>${d.category}<br>${d.score1},${d.score2},${d.score3}`),
                hoverinfo: 'text'
            }));

            const layout = {
                title: '三维能力分布',
                scene: {
                    xaxis: {title: '基础能力', range: [60, 100]},
                    yaxis: {title: '应用能力', range: [60, 100]},
                    zaxis: {title: '创新潜力', range: [60, 100]},
                    camera: {eye: {x: 1.5, y: 1.5, z: 0.5}}
                },
                margin: {l: 0, r: 0, b: 0, t: 40},
                showlegend: true
            };

            Plotly.newPlot('chart-container', traces, layout, config);
        }

        // 切换图表
        function showChart(chartType) {
            document.querySelectorAll('.tab').forEach(t => t.classList.remove('active-tab'));
            document.querySelector(`.tab[onclick="showChart('${chartType}')"]`).classList.add('active-tab');
            
            switch(chartType) {
                case 'line':
                    createLineChart();
                    break;
                case 'pie':
                    createPieChart();
                    break;
                case 'scatter':
                    create3DScatter();
                    break;
            }
        }

        // 初始化显示折线图
        showChart('line');
    </script>
</body>
</html>
